/*
 * @Title: 官方攻略-详情模块
 * @Created by: gsjPC 
 */
<template>
	<view :class="isShowAddXc ||isShowSoucang  || type !=='' ? 'stopPrevent' : ''">
		<comHeader :config="navConfig"/>
		<!-- 头部 -->
		<view class="header">
			<banner />
			<!-- <image class="header-bg" src="/static/30557694901.mp4" mode=""></image>
			<view class="play" ></view> -->
			<view class="p-num"  @click="goImgDetail">
				<image src="/static/tupian.png" mode="aspectFit"></image>
				<text>10</text>
			</view>
			<view class="p-num" style="top: 188upx;">
				<image  class="VR-img" src="/static/360VR.png" mode="aspectFit"></image>
			</view>
			
			<view class="header-bottom"></view>
		</view>
		<view class="xqCon">
			<view class="xqBigTitle"><text>沈阳故宫游玩攻略</text></view>
			<view class="spot-info-btn">
				<image  @click="togglePopup('bottom', 'share')" src="/static/fenxiang-1.png" mode=""></image>
				<image @click="souCangTc" src="/static/shoucang.png" mode=""></image>
				<view @click="addXcTc">
					<image src="/static/add.png" mode="" ></image>
					<image class="xingcheng" src="/static/xingcheng.png" mode=""></image>
				</view>
				<view class="shenqi-btn" @click="toAudio">语音导览</view>
			</view>
			
			<view 
			class="xqGuideList"
			v-for="(xqGuide,index1) in xqGuideList"
			:key="index1">
			<view class="xqGuideTit"><text>{{xqGuide.title}}</text></view>
			<view class="guiCon"><text>{{xqGuide.text}}</text></view>
			<view class="guiPic"><image :src="xqGuide.pic"></image></view>
			<view class="guiCon"><text>{{xqGuide.text}}</text></view>
			<!-- <scroll-view class="guiPicScroll" scroll-x="true">
				<view 
				v-for="(guiPic,index2) in xqGuide.guiPicList"
				:key="index2"
				class="guiPicList">
				
				</view>
			</scroll-view> -->
			</view>
			
			<!-- <view class="talkInput " :class="popupLayerClass">
				<image src="/static/talkInput.png"></image>
				<input 
				type="input" 
				placeholder="留下你的足迹吧！" 
				placeholder-style="color:#CCCCCC"
				adjust-position="true"
				/>
			</view> -->
			<!-- 热门评论 -->
			
			<Comment :isShowPlBox="true" :isShowAllHead="false"/>
			
		</view>
		
		<!-- 加入行程 -->
		<xingcheng-type v-if='isShowAddXc' :config='typeConfig'></xingcheng-type>
		<!-- 加入搜藏 -->
		<Collection v-if="isShowSoucang"/>
		<!-- 底部分享弹窗 -->
		<uni-popup ref="share" :type="type" :custom="true" @change="change">
			<view class="uni-share">
				<view class="uni-share-title">分享到</view>
				<view class="uni-share-content">
					<view v-for="(item, index) in bottomData" :key="index" class="uni-share-content-box">
						<view class="uni-share-content-image">
							<image :src="item.icon" class="image" />
						</view>
						<view class="uni-share-content-text">{{ item.text }}</view>
					</view>
				</view>
				<view class="uni-share-btn" @click="cancel('share')">取消分享</view>
			</view>
		</uni-popup>
		<popuper v-if='showPop'></popuper>
	</view>
</template>

<script>
	import popuper from '@/components/Popuper.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import Comment from '@/components/Comment.vue'
	import banner from '@/components/banner.vue'
	export default{
		components:{
			Comment,
			uniPopup,
			banner,
			popuper
		},
		data(){
			return{
				type:'',
				typeConfig:{
					typeId:1
				},
				navConfig: {
					comScroll:144,
					isFixed:false,
					left:{
						text:'',
						isShowLeft:true,
						leftGobackColor:'#ffffff',
						leftTextColor:'',
					},
					mid:{
						isShowMid:false,
						text:''
					},
					right:{
						text:'',
						isShowRight:false,
						ico: '', //右侧图标地址
						isShowRightIco: false ,//是否显示右侧图标
						ico2: '', //右侧第二个图标地址
						isShowRightIco2: false //是否显示右侧第二个图标
					}
				},
				bottomData: [
					{
						text: '微信',
						icon: '/static/audio/fx-wx.png',
						name: 'wx'
					},
					{
						text: '朋友圈',
						icon: '/static/audio/fx-friend.png',
						name: 'pyq'
					},
					{
						text: 'QQ',
						icon: '/static/audio/fx-qq.png',
						name: 'qq'
					},
					{
						text: 'QQ空间',
						icon: '/static/audio/fx-qqzone.png',
						name: 'qqkj'
					}
					
				],
				isShowAddXc:false,//是否显示加入行程弹窗
				isShowSoucang:false,//是否显示加入搜藏弹窗
				xqGuideList:[
					{
						title:'游玩指南',
						text:'沈阳故宫是我国仅存的两大宫殿建筑群之一，沈阳故宫占地面积六万多平方米，有古建筑114座，500多间，至今保存完好。',
						pic:'/static/testglPic6.jpg',
					},
					{
						title:'必经景点',
						text:'沈阳故宫是我国仅存的两大宫殿建筑群之一，沈阳故宫占地面积六万多平方米，有古建筑114座，500多间，至今保存完好。',
						pic:'/static/testglPic.png',
					}
					
				]
			}
		},
		methods:{
			
			// 搜藏弹窗
			souCangTc(){
				this.isShowSoucang = true
			},
			closeColl(){
				this.isShowSoucang=false
			},
			//加入行程弹窗
			addXcTc(){
				this.isShowAddXc = true
			},
			closeXcType(){
				this.isShowAddXc=false
			},
			//加入行程弹窗跳到填写信息
			toOrder(){
				uni.navigateTo({
					url:'/pages/home/scenicSpot/spotOrder'
					
				})
			},
			// 分享弹窗
			togglePopup(type, open) {
				this.type = type
				this.$refs[open].open()
			},
			cancel(type) {
				this.$refs[type].close()
			},
			change(e) {
				console.log(e.show)
			},
			//跳到语音导览页面
			toAudio(){
				uni.navigateTo({
					url:'/pages/home/scenicSpot/audio/spotAudio'
				})
			},
			//跳到图片详情
			goImgDetail(){
				uni.navigateTo({
					url:'/pages/home/hotel/photo'
				})
			}
		},
		
	}
</script>

<style>
	/* 起到固定作用，从而解决原页面触摸穿透的问题 */
	.stopPrevent{
		width:100%;
		height:100%;
		position: fixed;
		top:0;
		left:0;
		overflow: hidden;
	},
	/* 头部 */
	.header{
		width: 750upx;
		height: 458upx;
		position: relative;
		overflow: hidden;
	}
	.header-bg{
		width: 750upx;
		height:458upx;
		position: absolute;
	}
	.back{
		width: 30upx;
		height: 36upx;
		top: 60upx;
		left: 26upx;
		position: absolute;
	}
	.play{
		position: absolute;
		top:50%;
		transform: rotateY(-50%);
		left:342upx;
		width:0;
		height:0;
		border-top:35.5upx solid transparent;
		border-bottom:35.5upx solid transparent;
		border-left:63upx solid #FFFFFF;
	}
	
	.header-bottom{
		width: 750upx;
		height: 30upx;
		bottom: 0upx;
		border-radius: 30upx 30upx 0 0;
		background: #FFFFFF;
		position: absolute;
		z-index: 9;
	}
	.p-num{
		width: 125upx;
		height: 48upx;
		top: 103upx;
		right: 0;
		position: absolute;
		background: rgba(0,0,0,0.5);
		border-radius: 30upx 0 0 30upx;
		position: absolute;
	}
	.p-num image{
		width: 26upx;
		height: 26upx;
		margin-left:36upx;
		margin-top: 12upx;
		float: left;
	}
	.VR-img{
		width: 92upx !important;
		height: 32upx !important;
		margin-left:20upx !important;
		margin-top: 8upx !important;
	}
	.p-num text{
		color: #FFFFFF;
		font-size: 24upx;
		line-height: 48upx;
		float: left;
		margin-left: 16upx;
	}
	/* 头部end */
	
	.xqCon{
		width:100%;
		border-top-left-radius: 30upx;
		border-top-right-radius: 30upx;
		position: relative;
		z-index: 9;
		background-color: #FFFFFF;
	}
	.xqBigTitle{
		font-size: 32upx;
		color: #000000;
		margin:0 36upx;
	}
	.xqGuideTit{
		color: #010101;
		font-size: 32upx;
		margin:26upx 0 0 36upx;
	}
	.xqGuideTit:after{
		content:'';
		width:140upx;
		height: 20upx;
		background-color: #C1E2FF;
		display: block;
		margin-top: -12upx;
		z-index: -1;
		border-radius: 20upx;
		margin-bottom: 30upx;
	}
	.xqGuideList{
		margin-bottom: 80upx;
		}
		
	.spot-info-btn{
		width: 710upx;
		height: 37upx;
		padding-top: 30upx;
		margin-left: 37upx;
		
	}
	.spot-info-btn image{
		width: 35upx;
		height: 35upx;
		margin-right: 10upx;
		float: left;
		padding:10upx;
	}
	
	.xingcheng{
		width: 54upx !important;
		height: 28upx !important;
		margin-top: -10upx;
		margin-left: -15upx;
	}
	
	.guiTit{
		font-size: 30upx;
		color: #010101;
		margin:0 48upx;
	}
	.guiCon{
		margin:32upx 24upx 0 48upx;
		line-height: 46upx;
		font-size: 26upx;
		color: #666666;
		text-indent: 2em;
	}
	.guiPic image{
		width:680upx;
		height: 324upx;
		border-radius: 10upx;
		display: block;
		margin: auto;
	}
	
	.guiPicList{
		display: inline-block !important;
		margin-right: 25upx;
		height:209upx;
	}
	.guiPicList:first-child{
		margin-left: 48upx;
	}
	.guiPicList image{
		width:277upx;
		height:209upx;
		background-color: #DC3509;
		border-radius: 10upx;
	}
	.shenqi-btn{
		width: 144upx;
		height: 45upx;
		color: #FFFFFF;
		font-size: 24upx;
		text-align: center;
		margin-top: -10upx;
		margin-right: 20upx;
		line-height: 45upx;
		border-radius: 30upx;
		margin-right: 40upx;
		border: none;
		white-space: nowrap;  /*强制span不换行*/
		float: right;
		background: -webkit-linear-gradient(left, #54B0FF,#5773FE);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #54B0FF,#5773FE);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, #54B0FF,#5773FE);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #54B0FF,#5773FE);
		/* 标准的语法 */
	}
	.talkInput{
		width:690upx;
		height: 90upx;
		line-height: 90upx;
		margin: 50upx auto 0 auto;
		border: 1upx solid #DCDCDC;
		position: relative;
	}
	.talkInput > image{
		width:30upx;
		height: 40upx;
		position: absolute;
		top:50%;
		margin-top: -20upx;
		left: 40upx;
	}
	.talkInput input{
		height: 90upx;
		line-height: 90upx;
		padding-left: 90upx;
	}
	/* 底部分享 */
	.uni-share {
		background: #fff;
	}
	
	.uni-share-title {
		line-height: 60upx;
		font-size: 24upx;
		padding: 15upx 0;
		text-align: center;
	}
	
	.uni-share-content {
		display: flex;
		flex-wrap: wrap;
		padding: 15px;
	}
	
	.uni-share-content-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 25%;
		box-sizing: border-box;
	}
	
	.uni-share-content-image {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 60upx;
		height: 60upx;
		overflow: hidden;
		border-radius: 10upx;
	}
	
	.uni-share-content-image .image {
		width: 100%;
		height: 100%;
	}
	
	.uni-share-content-text {
		font-size: 26upx;
		color: #333;
		padding-top: 5px;
		padding-bottom: 10px;
	}
	
	.uni-share-btn {
		height: 90upx;
		line-height: 90upx;
		border-top: 1px #f5f5f5 solid;
		text-align: center;
		color: #666;
	}
</style>
